<template>
    <view class="page" style="background-image: url('https://morgan.dingxians.cn/static/climbing/xiangqingbg.png');">
        <u-sticky>
            <hedsty
                :headCentext="'第' + (cengshu == 1 ? '一' : cengshu == 2 ? '二' : cengshu == 3 ? '三' : cengshu == 4 ? '四' : cengshu == 5 ? '五' : cengshu == 6 ? '六' : cengshu == 7 ? '七' : cengshu == 8 ? '八' : cengshu == 9 ? '九' : '') + '层'"
                :backImg="'https://morgan.dingxians.cn/static/climbing/back.png'">
            </hedsty>
        </u-sticky>
        <view class="dashangpin_box">
            <image :src="imageBg" mode="scaleToFill" />
        </view>
        <view style="height: 450rpx;"></view>
        <view class="dizuo_bvox"
            style="background-image: url('https://morgan.dingxians.cn/static/climbing/xq_t_bg.png');">
            <view class="name_box"
                style="background-image: url('https://morgan.dingxians.cn/static/climbing/name2222.png');">{{ titleBg }}
            </view>
        </view>


        <view class="content_box" v-for="(item, index) in probability" :key="index"
            v-if="Number(item.total_probability) > 0">
            <view class="contop_box"
                :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/uniPic/' + item.id + '.png)' }">
                <view class="vent_text_box" :class="'vent_text_box_' + item.id">概率：{{ item.total_probability }}%</view>
            </view>
            <view class="content_neirong_box">
                <view class="dange_neirong_box" v-if="item.id == items.level_id"
                    v-for="(items, indexs) in liebiao.blind_box_prize" :key="indexs"
                    :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/uniPic/0' + items.level_id + '.png)' }">
                    <view class="dange_hezi_box">
                        <image :src="items.goods.image" mode="heightFix" />
                    </view>
                    <view class="dange_con_name_box">{{ items.goods.title }}</view>
                    <view class="dange_con_name_box">概率：{{ Number(items.probability).toFixed(2) }}% </view>
                    <view class="dange_con_price_box" :class="'dange_con_price_box_' + items.level_id">{{ liebiao.price
                        }}元素</view>
                </view>
            </view>
        </view>

        <view class="cebianniu_box1" @click="getDetail()">
            <image src="https://morgan.dingxians.cn/static/climbing/shuaxin.png" mode="scaleToFill" />
        </view>
        <view class="cebianniu_box2" @click="goBonus">
            <image src="https://morgan.dingxians.cn/static/climbing/shangdai.png" mode="scaleToFill" />
        </view>
        <view class="cebianniu_box3" @click="climbTowerOrderPrizesFoldWinnerRecord()">
            <image src="https://morgan.dingxians.cn/static/climbing/jilu.png" mode="scaleToFill" />
        </view>
        <view class="cebianniu_box4" @click="rulePup">
            <image src="https://morgan.dingxians.cn/static/climbing/guize.png" mode="scaleToFill" />
        </view>
        <button class="cebianniu_box5" @click="onShare" open-type="share">
            <image src="https://morgan.dingxians.cn/static/climbing/fenxiang.png" mode="scaleToFill" />
        </button>
        <view class="choujiang_box">
            <view class="dange_choujiang_box" v-for="(item, index) in drawOpen" :key="index" @click="openDraw(item)"
                style="background-image: url('https://morgan.dingxians.cn/static/climbing/drawopensbu.png');">
                <view class="top_jichou_box">{{ item.val }}抽</view>
                <view class="top_price_box">{{ liebiao.price }}元素
                </view>
            </view>
        </view>

        <drawzf :bgImg="'https://morgan.dingxians.cn/static/4.png'" :payShow="payShow" @closePopup="closePopup"
            :challenge_box_data="liebiao" :burst="burst" :pata="false" :balance="balance" :point="point"
            :pay_price="pay_price" :si_dPay="si_dPay" @payType="payType" :payId="payId" @agreeBtn="agreeBtn"
            :agreeSta="agreeSta" @goumai="$no(goumai)" @conClick="conClick"></drawzf>
        <rule :bgImg="'https://morgan.dingxians.cn/static/3.png'" :bgTitle="'https://morgan.dingxians.cn/static/7.png'"
            :gbImg="'https://morgan.dingxians.cn/static/6.png'" :rulecontent="rulecontent" :ruleShow="ruleShow"
            @handlePopup="handlePopup"></rule>
        <drawRecord :recordShow="recordShow" :xianshiType="'2'" :tiaoBg="'rgba(66, 70, 255, .3)'"
            @handlePopup="handlePopup" :rewardList="rewardList" :bgImg="'https://morgan.dingxians.cn/static/4.png'"
            :bgTitle="'https://morgan.dingxians.cn/static/5.png'" :gbImg="'https://morgan.dingxians.cn/static/6.png'">
            <template v-slot:empty>
            </template>
        </drawRecord>
        <frawResult :drawResultShow="drawResultShow" @gotoin="gotoin" @accept="accept" :prizeList="prizeList">
        </frawResult>
    </view>
</template>
<script>
import hedsty from '../components/hedsty.vue'
import drawzf from '../components/drawzf.vue'
import rule from '../components/rule.vue'
import drawRecord from '../components/drawRecord.vue'
import frawResult from '../components/climbResu.vue'
export default {
    components: {
        hedsty,
        drawzf,
        rule,
        drawRecord,
        frawResult,
    },
    data() {
        return {
            noClick: true, //防抖
            drawOpen: [
                {
                    id: 1,
                    val: 1
                }
            ],
            burst: 1,
            outpost: '',
            cengshu: '',
            liebiao: {
                blind_box_prize: []
            },
            probability: [],
            imageBg: '',
            titleBg: '',
            payShow: false,
            balance: '',
            point: '',
            pay_price: '',
            si_dPay: false,
            agreeSta: true,
            ruleShow: false,
            rulecontent: '',
            rewardList: [],
            recordShow: false,
            drawResultShow: false,
            prizeList: {},
            // #ifndef MP-ALIPAY
            payId: 1,
            // #endif
            // #ifdef MP-ALIPAY
            payId: 3,
            // #endif
        }
    },
    onLoad(e) {
        uni.setStorageSync('open', e.open)
        this.outpost = e.id
    },
    onShow() {
        this.getDetail()
    },
    methods: {
        onShare() {
            let that = this
            uni.share({
                provider: 'weixin',
                scene: "WXSceneSession",
                type: 5,
                imageUrl: 'https://morgan.dingxians.cn/static/patatupian/' + that.outpost + '.png',
                title: '第' + that.cengshu + '层',
                miniProgram: {
                    id: 'gh_7cbc8087cb4f',
                    path: 'uniPage/bingDetail?id=' + that.outpost,
                    type: 0,
                    webUrl: 'https://yq.dingxians.cn'
                },
                success: ret => {
                    console.log('success', ret);
                },
                fail: err => {
                    console.log('error', err);
                }
            });
        },
        climbTowerOrderPrizesFoldWinnerRecord() {
            let data = {
                level_id: this.outpost
            }
            this.$Request.get(this.$api.index.climbTowerOrderPrizesFoldWinnerRecord, data).then(res => {
                if (res.code == 200) {
                    this.rewardList = res.data.data
                    this.recordShow = true
                }
            })
        },
        goBonus() {
            uni.switchTab({
                url: '/pages/bonus/index'
            })
        },
        rulePup() {
            this.$Request.get(this.$api.agreen.contents + `/climbing`).then(res => {
                this.rulecontent = res.data.content
                this.ruleShow = true
            })
        },
        handlePopup() {
            this.ruleShow = false
            this.recordShow = false
        },
        getDetail() {
            uni.showLoading({
                title: '加载中',
                icon: 'none'
            })
            let data = {
                climb_tower_id: this.outpost
            }
            this.$Request.get(this.$api.index.climbTowersShow, data).then(res => {
                uni.hideLoading()
                if (res.code == 200) {
                    this.liebiao = res.data.data
                    this.probability = res.data.data.probability.reverse()
                    this.cengshu = res.data.data.level_id
                    this.imageBg = res.data.data.blind_box_prize[0].goods.image
                    this.titleBg = res.data.data.blind_box_prize[0].goods.title
                    this.share.title = '第' + this.cengshu + '层'
                    this.share.parameter = '&id=' + this.outpost
                    this.share.imageUrl = 'https://morgan.dingxians.cn/static/patatupian/' + this.outpost + '.png'


                    // #ifdef MP-ALIPAY
                    // setTimeout(() => {
                    uni.setNavigationBarTitle({
                        title: '第' + this.cengshu + '层'

                    })
                    // }, 600);
                    // #endif

                }
            })
        },
        closePopup() {
            this.payShow = false
        },
        openDraw(item) {
            this.burst = item.val
            this.box_pay_mode = item.id
            this.mPayment()
        },
        mPayment() {
            var data = {
                level_id: this.cengshu
            }
            this.$Request.get(this.$api.index.climbTowersConfirmPaymentPage, data).then(res => {
                if (res.code == 401) {
                    this.balance = res.data.deduction_balance
                    this.point = res.data.deduction_point
                    this.pay_price = res.data.difference_amount
                    this.si_dPay = true
                } else if (res.code == 200) {
                    this.balance = res.data.data.deduction_balance
                    this.point = res.data.data.deduction_point
                    this.pay_price = res.data.data.pay_price
                    this.si_dPay = false
                }
                this.payShow = true
            })

        },
        goumai() {
            if (this.agreeSta) {
                if (this.si_dPay) {
                    console.log('跳转支付')
                    this.payMentapily()
                } else {
                    this.payBanalce()
                }
            } else {
                this.$msg('请先同意协议')
            }

        },

        agreeBtn() {
            this.agreeSta = !this.agreeSta
        },
        payBanalce() {
            var data = {
                level_id: this.cengshu,
            }
            this.$Request.post(this.$api.index.climbTowersDraw, data).then(res => {
                if (res.code == 200) {
                    this.payShow = false
                    this.drawResultShow = true
                    this.prizeList = res.data.data
                    this.outpost = ''
                    this.getDetail()
                }
            })
        },
        gotoin() {
            uni.switchTab({
                url: '/pages/bonus/index',
            })
        },
        accept() {
            this.drawResultShow = false
        },
        // 微信或支付宝支付
        payMentapily() {
            let data = {
                type: this.payId,
                id: 0,
                amount: this.pay_price,
                // #ifdef MP-WEIXIN
                market: 'wx',
                // #endif
                // #ifdef APP-PLUS
                market: '',
                // #endif
            }
            console.log(data, data)
            this.$Request.post(this.$api.user.rechargeOrders, data).then(res => {
                console.log(res)
                var pay_data = res.data.data

                if (this.payId == 1) {
                    // #ifdef MP-WEIXIN
                    uni.requestPayment({
                        provider: 'wxpay',
                        timeStamp: pay_data.timeStamp.toString(),
                        nonceStr: pay_data.nonceStr,
                        signType: 'MD5',
                        package: pay_data.package,
                        paySign: pay_data.paySign,
                        success: (res) => {
                            this.$msg('支付成功')
                            setTimeout(() => {
                                this.payBanalce()
                            }, 500)
                        },
                        fail: (err) => {
                            console.log(err)
                        },
                    })
                    // #endif
                    // #ifdef APP-PLUS
                    uni.requestPayment({
                        provider: 'wxpay',
                        orderInfo: pay_data,
                        success: (res) => {
                            this.$msg('支付成功')
                            setTimeout(() => {
                                this.is_pushPay = false
                                this.payNum = 0
                                this.payMent()
                            }, 500)
                        },
                        fail: (error) => {
                            console.log(error)
                        },
                    })
                    // #endif
                } else {
                    uni.requestPayment({
                        provider: 'alipay',
                        orderInfo: pay_data.trade_no,
                        success: (res) => {
                            // this.$msg('支付成功')
                            setTimeout(() => {
                                this.payBanalce()
                            }, 500)
                        },
                        fail: (error) => {
                            console.log(error)
                        },
                    })
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    min-height: 100vh;
    background-size: 100% 100%;
    box-sizing: border-box;
    position: relative;

    .cebianniu_box1 {
        width: 109rpx;
        height: 122rpx;
        position: absolute;
        right: 30rpx;
        top: 668rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .cebianniu_box2 {
        width: 109rpx;
        height: 122rpx;
        position: absolute;
        right: 30rpx;
        top: 808rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .cebianniu_box3 {
        width: 109rpx;
        height: 122rpx;
        position: absolute;
        right: 30rpx;
        top: 532rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .cebianniu_box4 {
        width: 109rpx;
        height: 122rpx;
        position: absolute;
        left: 30rpx;
        top: 668rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .cebianniu_box5 {
        width: 109rpx;
        height: 122rpx;
        position: absolute;
        left: 30rpx;
        top: 532rpx;
        background: transparent;
        padding: 0;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .dashangpin_box {
        width: 428rpx;
        height: 450rpx;
        // background-color: red;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 202rpx;
        z-index: 10;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .dizuo_bvox {
        width: 684rpx;
        height: 449rpx;
        background-size: 100% 100%;
        margin-top: -204rpx;
        margin-left: 66rpx;
        position: relative;

        .name_box {
            width: 400rpx;
            height: 103rpx;
            font-family: text1;
            text-align: center;
            font-weight: bold;
            font-size: 32rpx;
            color: #FFFFFF;
            line-height: 103rpx;
            font-style: italic;
            position: absolute;
            background-size: 100% 100%;
            left: 109rpx;
            top: 235rpx;
        }

    }

    .content_box {
        height: 324rpx;
        width: 100%;
        box-sizing: border-box;
        padding: 0 30rpx;
        margin-bottom: 20rpx;

        .contop_box {
            width: 365rpx;
            height: 65rpx;
            background-size: 100% 100%;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-end;
            padding-inline: 0 10rpx;
            margin-bottom: 20rpx;

            .vent_text_box {
                height: 65rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 22rpx;
                color: #FFEE1F;
                line-height: 65rpx;

                &.vent_text_box_1 {
                    color: #C5F7FD;
                }

                &.vent_text_box_2 {
                    color: #EBC5FD;
                }

                &.vent_text_box_3 {
                    color: #FDC5EB;
                }

                &.vent_text_box_4 {
                    color: #FFEE1F;
                }
            }
        }

        .content_neirong_box {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding-left: 30rpx;
            overflow: hidden;
            overflow-x: auto;
            display: flex;
            justify-content: flex-start;

            .dange_neirong_box {
                width: 160rpx;
                height: 243rpx;
                background-size: 100% 100%;
                box-sizing: border-box;
                margin-right: 20rpx;
                flex-shrink: 0;

                .dange_hezi_box {
                    width: 114rpx;
                    height: 140rpx;
                    margin: auto;
                    margin-bottom: 3rpx;

                    image {
                        height: 100%;
                    }
                }

                .dange_con_name_box {
                    width: 100%;
                    height: 22rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 22rpx;
                    color: #FFFFFF;
                    line-height: 22rpx;
                    box-sizing: border-box;
                    text-align: center;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    margin-bottom: 13rpx;
                }

                .dange_con_price_box {
                    width: 100%;
                    height: 22rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 22rpx;
                    color: #FFFFFF;
                    line-height: 22rpx;
                    box-sizing: border-box;
                    text-align: center;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;

                    &.dange_con_price_box_1 {
                        color: #C5F7FD;
                    }

                    &.dange_con_price_box_2 {
                        color: #EBC5FD;
                    }

                    &.dange_con_price_box_3 {
                        color: #FDC5EB;
                    }

                    &.dange_con_price_box_4 {
                        color: #FFEE1F;
                    }
                }
            }
        }


    }


    .choujiang_box {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 240rpx;
        display: flex;
        justify-content: space-around;

        .dange_choujiang_box {
            width: 139rpx;
            height: 160rpx;
            background-size: 100% 100%;
            box-sizing: border-box;
            padding-top: 41rpx;

            .top_jichou_box {
                margin-bottom: 14rpx;
                width: 100%;
                height: 44rpx;
                font-family: text1;
                font-weight: bold;
                font-size: 48rpx;
                color: #FFEDD7;
                line-height: 44rpx;
                text-align: center;
            }

            .top_price_box {
                width: 100%;
                height: 23rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #FFEDD7;
                line-height: 23rpx;
                text-align: center;
            }
        }
    }
}
</style>
